<!--ljx 2022.9.1 测试页面  -->
<template>
  <view style="display: flex; flex-wrap: wrap">
    <view class="machine-list-card">
      <view style="display: flex">
        <view class="left">
          <view class="img">
            <img :src="img" class="img" />
          </view>
        </view>
        <view class="right">
          <view class="info-item">
            <view class="info-item-title">
              {{ title }}
            </view>
          </view>
          <view class="info-item">
            <view class="info-item-title">
              {{ describe }}
            </view>
          </view>
          <view class="info-item" style="color: #ff5000">
            <view class="info-item-title"> ¥{{ price }} </view>
          </view>
          <view class="info-item">
            <view class="info-item-title">
              <el-input-number v-model="num" :min="1" :max="99" size="small"
                ><template #prefix>
                  <span>数量：</span>
                </template></el-input-number
              ></view
            >
          </view>

          <view class="info-item">
            <view class="infobutton" @click="linkDetail">
              <slot>商品详情</slot>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { inject, ref, defineProps, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store=useStore()

const router=useRouter()
const route=useRoute()
const num = ref(1);
const props = defineProps({
  id: {
    type: Number,
    default: "产品编号",
  },
  title: {
    type: String,
    default: "产品名称",
  },
  describe: {
    type: String,
    default: "产品描述",
  },
  price: {
    type: Number,
    default: 1,
  },
  num: {
    type: Number,
    default: 1,
  },
  img: {
    type: String,
    default: "/a2.jpg",
  },
});

function linkDetail() {
  let param = {
    id: props.id,
    title: props.title,
    describe: props.describe,
    price: props.price,
    num: num.value,
    img: props.img,
  };
  console.log(param);
  // cartlist.value.push(param);
  // alert("已加入购物车！");
  store.dispatch("setGood", param)
  router.push({path:"/good-details",query:{id:param.id}})
}
</script>

<style scoped>
.machine-list-card {
  width: 350px;
  height: 200px;
  /* margin: 5px auto; */
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(160, 160, 160, 0.3);
  margin-bottom: 10px;
  margin-right: 10px;
}

.left {
  width: 180px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  width: 200px;
  height: 200px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.img {
  width: 170px;
  height: 170px;
}

.img image {
  width: 170px;
  height: 170px;
}

.info-item {
  display: flex;
  white-space: nowrap;
}

.info-item-title {
  /* font-weight: bold; */
  font-size: 20px;
  width: 3em;
  text-align: justify;
  text-align-last: justify;
}

.infobutton {
  font-weight: bold;
  font-size: 14px;
  color: firebrick;
  box-sizing: border-box;
  /* 		width: 4em;
		text-align: justify;
		text-align-last: justify; */
  margin-left: 2px;
}

.info-item-content {
  margin-left: 10px;
  overflow: hidden;
}
</style>
